<template>
	<view class="count p-20">
		<view class="topBody p-20 b-r-20 b-f">
			<view class="topTime f f-a-c f-j-b">
				<view class="lefTime">
					上课开始时间
				</view>
				<view @click="showTime=true" class="setTime f f-a-c">
					{{time}}
					<image src="/static/my/you.png" class="timeImg m-l-20" mode=""></image>
				</view>
			</view>
			<view class="xian"></view>
			<view class="topTime f f-a-c f-j-b">
				<view class="lefTime">
					本次读书会主题
				</view>
				<view class="setTime f f-a-c">
					<input type="text" v-model="theme" class="input" placeholder="请输入主题" name="" id="">

				</view>
			</view>
			<view class="xian"></view>
			<view class="topTime f f-a-c f-j-b">
				<view class="lefTime">
					阅读指导老师姓名
				</view>
				<view @click="show3=true" class="setTime f f-a-c">
					{{name}}
					<image src="/static/my/you.png" class="timeImg m-l-20" mode=""></image>
				</view>
			</view>
			<view class="xian"></view>
			<!-- 下面的图片上传 -->
			<view class="topBod  b-f b-r-15 m-b-25">
				<view class="cot m-b-20 f f-a-c">
					内容 <view class="duo m-l-10">
						(最多9张)
					</view>
				</view>
				<view class="pingText">
					<u-upload ref="uUpload" :show-progress="false" @on-remove="onRemove" upload-text="点击上传"
						max-count="9" :form-data="fromData" width="190" @on-success="succress"
						:before-upload="beforeUpload" height="190" :action="url"></u-upload>
				</view>
			</view>
		</view>
		<!-- view -->
		<view class="botBei m-t-20 p-20 b-r-20 b-f">
			<view class="name">
				文字备注
			</view>
			<textarea name="" placeholder="请输入文字备注内容" class="area" v-model="vlue" id="" cols="30" rows="10"></textarea>
		</view>
		<!-- 这个是保存 -->
		<view @click="save" class="save">
			保存
		</view>
		<u-picker @confirm="confirmFn" v-model="showTime" :params="params" mode="time"></u-picker>
		<u-picker v-model="show3" :range="fenList" range-key="name" @confirm="confirmFn3" mode="selector"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show3: false,
				fenList: uni.getStorageSync('userinfo').teachers,
				time: '请选择时间',
				showTime: false,
				theme: '',
				id: '',
				name: '请选择',
				nameId: '',
				fromData: {
					token: uni.getStorageSync('upload_token'),
					key: ''
				},
				// key: 
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				url: uni.getStorageSync('upload_domain'),
				token: uni.getStorageSync('upload_token'),
				vlue: '',
				domain: uni.getStorageSync('domain'),
				imgList: []
			}
		},
		computed: {

		},
		onLoad(options) {
			this.id = options.id
			this.fromData.key = this.genKey()
		},
		methods: {
			confirmFn3(e) {
				console.log(e, '88888');
				this.name = this.fenList[e[0]].name
			},
			async save() {
				let n = await this.$api.book_club_offsetsss({
					start_at: this.time,
					subject: this.theme,
					teacher_name: this.name,
					images: this.imgList.join(','),
					remark: this.vlue
				}, this.id)
				this.$msg(n.message)
				if (n.status) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			},
			onRemove(index, lists) {
				this.imgList = []
				lists.forEach(item => {
					this.imgList.push(this.domain + '/' + item.response.key)
				})
			},
			succress(data, index, lists, name) {
				console.log(data, index, lists, name, '999999999');
				this.imgList.push(this.domain + '/' + data.key)
			},

			genKey() {
				let n = `img/${+new Date()+'/'+this.randomString()}.png`
				console.log(n);
				return n
			},
			beforeUpload(index, list) {
				console.log(index, list, '000');
				// this.imgList = list.filter(item => {
				// 	return this.domain + '/' + item.response.key
				// })
				this.fromData.key = this.genKey()
				console.log(this.fromData, '8888888');
				return true
			},
			confirmFn(e) {
				this.time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
				console.log(e);
			},
			randomString() {
				let str = 'ABCDEFGHIJKIMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
				let num = '';
				for (let i = 0; i < 16; i++) {
					num += str.charAt(Math.floor(Math.random() * str.length));
				}
				console.log(num, '000000000000');
				return num;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.input {
		text-align: right;
	}

	.save {
		width: 90%;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		margin: 0 auto;
		margin-top: 250rpx;
	}

	.area {
		height: 200rpx;
		width: 100%;
		background-color: #ffffff;
		margin-top: 30rpx;
	}

	.botBei {
		.name {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}
	}

	.topBod {
		width: 100%;

		.cot {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.inp {
			height: 150rpx;
			width: 100%;
		}
	}

	.xian {
		height: 2rpx;
		width: 100%;
		background-color: #f8f8f8;
		margin: 30rpx 0;
	}

	.topTime {
		.lefTime {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}

		.setTime {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			color: #999999;

			.timeImg {
				width: 12rpx;
				height: 24rpx;
			}
		}
	}

	.topBody {}
</style>